<template>
  <view class="time-set" @tap="show=false">
    <custom-navi :show-home="false">营业时间修改</custom-navi>
	<view v-for="(item,index) in seasonList" :key='index' class="time">
		<view class="time-title">
			{{item.title}}
		</view>
		<view class="time-txt" @click="seasonTime(index)">
			{{item.txt}}
			<image src="/static/little-more.png" mode=""></image>
		</view>
	</view>
	<!-- <view class="time">
		<view class="time-title">
			每周营业日
		</view>
		<view class="time-txt">
			周一至周六
			<image src="/static/little-more.png" mode=""></image>
		</view>
	</view> -->
	<view class="timekeeping">
		<view v-for="(item,index) in timeData" :key='index' class="timekeeping-list">
			<view class="timekeeping-list-explain">
				营业时间段{{item.index==1?'':item.index}}
			</view>
			<view class="timekeeping-list-content">
				<view class="title">
					营业时间
				</view>
				<!-- <picker mode="time">
					<view>11</view>
				</picker> -->
				<view class="times">
					<!-- 8:00-23:00 -->
					<view class="">
						<picker mode="time" :value="item.time" start="00:00" end="23:01" @change="TimeChange($event,index)">
							<view class="picker">
								{{item.time}}
							</view>
						</picker>
					</view>
					<view class="">
						-
					</view>
					<view class="">
						<picker mode="time" :value="item.times" start="00:00" end="23:01" @change="TimesChange($event,index)">
							<view class="picker">
								{{item.times}}
							</view>
						</picker>
					</view>
				</view>
				<view style="margin-top: -18rpx;" @click="timeDelete(index)">
					<icon type="clear" size="12"/>
				</view>
				
			</view>
		</view>
		<view class="timekeeping-btn" @click="addBtn">
			＋ 添加营业时间段
		</view>
	</view>
    <!-- <view class="title">请选择每周营业日</view>
    <view class="chooce-day" @tap.stop="show=!show">
      <view>营业日</view>
      <view class="chooce-day-val">{{showDay()}}</view>
      <chooce-day :show="show" @change="handleGetDay" :week="weedDay"></chooce-day>
    </view>
    <view class="title">请设置营业时间段</view>
    <view class="chooce-time">
      <view class="chooce-time-box">
        <picker
          mode="time"
          :value="startTime"
          start="00:00"
          end="21:00"
          @change="bindStartTimeChange"
        >
          <view class="chooce-time-box-txt">{{startTime}}</view>
        </picker>
      </view>
      <view class="zhi">至</view>
      <view class="chooce-time-box">
        <picker
          mode="time"
          :value="endTime"
          :start="startTime"
          end="21:00"
          @change="bindEndTimeChange"
        >
          <view class="chooce-time-box-txt">{{endTime}}</view>
        </picker>
      </view>
    </view> -->
    <view class="btn">
      <button @tap="handleSubmit ()">确认修改</button>
    </view>
  </view>
</template>

<script>
import { changeInformation,updateByOperatingTime } from '../../api'
import chooceDay from '@/src/pages/components/chooce-box'
export default {
  data () {
    return {
      startTime: '00:00',
      endTime: '00:00',
      show: false,
      weedDay: [],
      shopInfo: {},
      weekSrt: '',
	  timeIndex:1,
	  timeData:[
		  // {index:'',time:'00:00',times:'00:00'}
	  ],
	  seasonList:[
		// {title:'每年营业季',txt:'全年',type:'0'},
		{title:'每周营业日',txt:'周一至周六',type:'1'}
	  ]
      // dayList: [
      //   {
      //     title: '周日'
      //   }, {
      //     title: '周一'
      //   }, {
      //     title: '周二'
      //   }, {
      //     title: '周三'
      //   }, {
      //     title: '周四'
      //   }, {
      //     title: '周五'
      //   }, {
      //     title: '周六'
      //   }
      // ]
    }
  },
  components: {
    chooceDay
  },
  onLoad () {
    const _self = this
    uni.getStorage({
      key: 'shopInfo',
      success: function (res) {
        _self.shopInfo = res.data
      }
    });
	let time = this.shopInfo.businessTime.split(',')
	console.log(time[0].split('-'))
	for(var i=0;i<time.length;i++){
		this.timeData.push({index:i+1,time:time[i].split('-')[0],times:time[i].split('-')[1]})
	}
	this.timeIndex=time.length
	// timeData
	// this.timeData
	const strArr=["日","一", "二", "三", "四", "五", "六"]
	this.weekSrt= this.shopInfo.weekDay.split(",") || []
	if(this.weekSrt){
	   this.seasonList[0].txt = `周${strArr[this.weekSrt[0]-1]} 至 周${strArr[this.weekSrt[this.weekSrt.length-1]-1]}` || ''
	}else{
	   this.seasonList[0].txt=''
	}
    // this.endTime = this.shopInfo.closingTime || '00:00'
    // this.startTime = this.shopInfo.openingTime || '00:00'
    // this.weedDay = this.shopInfo.weekDay.split(",") || []
	console.log(this.endTime,this.startTime,this.weedDay)
  },
  onShow(){
	  // console.log(1,option)
	  let timeData =''
	  uni.getStorage({
	      key: 'week',
	      success: function (res) {
	          console.log(res.data);
			  timeData=res.data
	      }
	  });
	  // console.log(res)
	  if(timeData){
		  const strArr=["日","一", "二", "三", "四", "五", "六"]
		  this.weekSrt= timeData.split(",") || []
		  if(this.weekSrt){
			  console.log(this.weekSrt)
			  if(this.weekSrt.length<=4){
				  let txt=[]
				for(var i=0;i<strArr.length;i++){
					for(var j=0;j<this.weekSrt.length;j++){
						if(this.weekSrt[j]-1==i){
							txt.push('周'+strArr[i])
						}
					}
				}
				console.log(txt)
				this.seasonList[0].txt=txt.join(',')
			  }else if(this.weekSrt.length==7){
				  this.seasonList[0].txt = '全周'
			  }else if(this.weekSrt.length>4){
				  let txt=[]
				  console.log(strArr,this.weekSrt)
				  let a = new Set(['1', '2', '3', '4', '5', '6', '7']);
				  let b = new Set(this.weekSrt);
				  
				  
				  // 差集
				  let difference = ([...a].filter(x => !b.has(x)));
				  // txt = new Set([strArr].filter(x => !this.weekSrt.has(x)));
				  for(var i=0;i<strArr.length;i++){
				  	for(var j=0;j<difference.length;j++){
				  		if(difference[j]-1==i){
				  			txt.push('周'+strArr[i])
				  		}
				  	}
				  }
				  console.log(difference)
				  this.seasonList[0].txt='除'+txt.join(',')+'外'
			  }else{
				this.seasonList[0].txt = `周${strArr[this.weekSrt[0]-1]} 至 周${strArr[this.weekSrt[this.weekSrt.length-1]-1]}` || ''
			  }
		  }else{
		     this.seasonList[0].txt=''
		  }
	  }
  },
  methods: {
	  //
	  seasonTime(index){
		  // console.log(this.shopInfo.weekDay)
		uni.navigateTo({
		    url: '../season/index?type='+this.shopInfo.weekDay
		});
	  },
	  addBtn(){ // ＋ 添加营业时间段
		this.timeIndex++
		this.timeData.push({index:this.timeIndex,time:'00:00',times:'00:00'})
	  },
	  timeDelete(index){
		  this.timeIndex--
		  this.timeData.splice(index,1)
		  for(var i=0;i<this.timeData.length;i++){
		  	// console.log(i)
			this.timeData[i].index=i+1
		  }
		  this.timeIndex=i
	  },
	  TimeChange(e,index) {
	  	this.timeData[index].time = e.detail.value
		// console.log(e,index)
	  },
	  TimesChange(e,index) {
	  	this.timeData[index].times = e.detail.value
	  },
	  //
    showDay () {
      let param = ''
      for (const item of this.weedDay) {
        param += `${this.dayList[parseInt(item) - 1].title},`

      }
      param = param.slice(0, param.length - 1)
      return param
    },
    handleGetDay (res) {
      this.weedDay = res
      this.shopInfo.wee = res
      console.log(res)
    },
    handleParams () {
      let paramsUrl = ''
      let param = {
        id: this.shopInfo.id,
        wee: this.shopInfo.weedDay,
        closingTime: this.shopInfo.closingTime,
        openingTime: this.shopInfo.openingTime
      }
      for (const item in param) {
        let val = this.shopInfo[item]
        let str = `${item}=${val}&`
        paramsUrl += str
      }
      paramsUrl = paramsUrl.slice(0, paramsUrl.length - 1)
      return paramsUrl
    },
    async handleSubmit () {
      // let url = `/merchant/app/store/changeInformation?${this.handleParams()}`
	 //  this.timeData
		// var params ={
		// 	businessTime:'', // 经营时间，多段“,”拼接;例如“08:00-12:00,14:00-16:00”
		// 	storeId:this.shopInfo.id,
		// 	wee:''
		// }
		let timeData =''
		uni.getStorage({
		    key: 'week',
		    success: function (res) {
		        console.log(res.data);
					  timeData=res.data
		    }
		});
		let timelist=[]
		console.log(this.timeData)
		for(var i=0;i<this.timeData.length;i++){
			timelist.push(this.timeData[i].time+'-'+this.timeData[i].times)
		}
		var params ={
			businessTime:timelist.join(','), // 经营时间，多段“,”拼接;例如“08:00-12:00,14:00-16:00”
			storeId:this.shopInfo.id,
			wee:timeData
		}
		console.log(params)
      try {
        const { data } = await updateByOperatingTime(params)
        this.$utils.common.toast.fail('修改成功');
        setTimeout(() => {
          return this.$utils.common.navigateBack()
        }, 1000)
      } catch (err) {
        console.log(err)
        if (err.code && err.statusCode) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    },
    bindEndTimeChange (e) {
      this.endTime = e.target.value
      this.shopInfo.closingTime = this.endTime
    },
    bindStartTimeChange (e) {
      this.startTime = e.target.value
      this.shopInfo.openingTime = this.startTime
    },
  },
}
</script>

<style lang="scss" scoped>
.btn {
  position: fixed;
  bottom: 116rpx;
  width: 100vw;
  display: flex;
  justify-content: center;
  button {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 88rpx;
    background: rgba(12, 212, 211, 1);
    opacity: 1;
    border-radius: 10rpx;
  }
}
.time-set{
	.time{
		display: flex;
		background-color: #FFFFFF;
		width:100%;
		opacity:1;
		padding: 20rpx 32rpx;
		margin-bottom: 20rpx;
		&-title{
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(80,80,80,1);
			opacity:1;
		}
		&-txt{
			margin-left: auto;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(80,80,80,1);
			opacity:1;
			image{
				width:14rpx;
				height:20rpx;
				opacity:1;
				margin-left: 20rpx;
			}
		}
	}
	.timekeeping{
		&-btn{
			width: 100%;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(12,212,211,1);
			opacity:1;
			text-align: center;
			padding: 20rpx 0;
			background-color: #FFFFFF;
			margin-top: 20rpx;
		}
		&-list{
			&-explain{
				font-size:28rpx;
				font-family:PingFang SC;
				color:rgba(179,179,179,1);
				opacity:1;
				padding: 32rpx;
			}
			&-content{
				display: flex;
				background-color: #FFFFFF;
				width:100%;
				opacity:1;
				padding: 20rpx 32rpx;
				align-items: center;
				.title{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(80,80,80,1);
					opacity:1;
				}
				.times{
					margin-left: auto;
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(80,80,80,1);
					opacity:1;
					margin-right: 20rpx;
					display: flex;
					view{
						
					}
				}
			}
			}
		}
		
	}

// .zhi {
//   padding: 0 46rpx;
//   font-size: 32rpx;
//   font-family: PingFang SC;
//   font-weight: 400;
//   color: rgba(153, 153, 153, 1);
// }
// .time-set {
//   height: 100vh;
//   .chooce-time {
//     padding: 30rpx 0;
//     background-color: #ffffff;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     &-box {
//       width: 200rpx;
//       height: 96rpx;
//       background: rgba(255, 255, 255, 1);
//       border: 2rpx solid rgba(153, 153, 153, 1);
//       opacity: 1;
//       border-radius: 6rpx;
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       &-txt {
//         font-size: 32rpx;
//         font-family: PingFang SC;
//         font-weight: bold;

//         color: rgba(80, 80, 80, 1);
//       }
//     }
//   }
//   .chooce-day {
//     position: relative;
//     background-color: #ffffff;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     padding: 20rpx 32rpx;
//     view:nth-child(1) {
//       font-size: 32rpx;
//       font-family: PingFang SC;
//       font-weight: 400;
//       color: rgba(80, 80, 80, 1);
//     }
//     view:nth-child(2) {
//       position: absolute;
//       right: 32rpx;
//       font-size: 28rpx;
//       font-family: PingFang SC;
//       font-weight: 400;
//       color: rgba(153, 153, 153, 1);
//     }
//   }
//   .title {
//     padding: 22rpx 32rpx;
//     padding-top: 20rpx;
//     font-size: 28rpx;
//     font-family: PingFang SC;
//     font-weight: bold;
//     color: rgba(80, 80, 80, 1);
//   }
// }
</style>
